<script setup>
import { computed } from 'vue'

const props = defineProps({
  id: {
    type: String,
    required: true
  },
  content: {
    type: String,
    required: true
  },
  isUser: {
    type: Boolean,
    default: false
  },
  timestamp: {
    type: Date,
    default: () => new Date()
  },
  showActions: {
    type: Boolean,
    default: true
  }
})

const emit = defineEmits(['copy', 'like', 'dislike'])

const formatTime = (timestamp) => {
  const now = new Date()
  const diff = now - timestamp
  
  if (diff < 60000) { // 1分钟内
    return '刚刚'
  } else if (diff < 3600000) { // 1小时内
    const minutes = Math.floor(diff / 60000)
    return `${minutes}分钟前`
  } else if (diff < 86400000) { // 24小时内
    const hours = Math.floor(diff / 3600000)
    return `${hours}小时前`
  } else {
    return timestamp.toLocaleDateString('zh-CN', {
      month: 'short',
      day: 'numeric',
      hour: '2-digit',
      minute: '2-digit'
    })
  }
}

const formatMessage = (content) => {
  // 简单的消息格式化，可以扩展支持markdown等
  return content
    .replace(/\n/g, '<br>')
    .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
    .replace(/\*(.*?)\*/g, '<em>$1</em>')
    .replace(/`(.*?)`/g, '<code>$1</code>')
}
</script>

<template>
  <div class="chat-message" :class="{ 'user-message': isUser, 'ai-message': !isUser }">
    <div class="message-avatar">
      <div class="avatar-icon">
        <svg v-if="isUser" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
          <circle cx="12" cy="7" r="4"/>
        </svg>
        <svg v-else width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M9 12l2 2 4-4"/>
          <path d="M21 12c0 4.97-4.03 9-9 9s-9-4.03-9-9 4.03-9 9-9 9 4.03 9 9z"/>
        </svg>
      </div>
    </div>
    
    <div class="message-content">
      <div class="message-header">
        <span class="message-author">{{ isUser ? '您' : 'AI助手' }}</span>
        <span class="message-time">{{ formatTime(timestamp) }}</span>
      </div>
      
      <div class="message-text" v-html="formatMessage(content)"></div>
      
      <div v-if="!isUser && showActions" class="message-actions">
        <button class="action-btn" @click="$emit('copy', content)" title="复制消息">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
          </svg>
        </button>
        <button class="action-btn" @click="$emit('like', id)" title="点赞">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
          </svg>
        </button>
        <button class="action-btn" @click="$emit('dislike', id)" title="点踩">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
            <line x1="12" y1="9" x2="12" y2="13"/>
            <line x1="12" y1="17" x2="12.01" y2="17"/>
          </svg>
        </button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.chat-message {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  animation: fadeIn 0.3s ease-out;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-background-soft);
  border: 1px solid var(--color-background-mute);
}

.avatar-icon {
  color: var(--color-text-light);
}

.user-message .avatar-icon {
  color: var(--color-primary);
}

.message-content {
  flex: 1;
  min-width: 0;
}

.message-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.message-author {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-heading);
}

.message-time {
  font-size: 0.75rem;
  color: var(--color-text-light-2);
}

.message-text {
  color: var(--color-text);
  line-height: 1.6;
  word-wrap: break-word;
}

.message-text :deep(code) {
  background: var(--color-background-soft);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 0.875em;
  color: var(--color-primary);
}

.message-text :deep(strong) {
  font-weight: 600;
  color: var(--color-heading);
}

.message-text :deep(em) {
  font-style: italic;
  color: var(--color-text-light);
}

.message-actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.chat-message:hover .message-actions {
  opacity: 1;
}

.action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-background-mute);
  border-radius: var(--radius-sm);
  background: var(--color-background-card);
  color: var(--color-text-light);
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
}

.action-btn:hover {
  background: var(--color-background-soft);
  border-color: var(--color-background-mute);
  color: var(--color-text);
  transform: translateY(-1px);
}

.action-btn:active {
  transform: translateY(0);
}

/* 用户消息样式 */
.user-message {
  flex-direction: row-reverse;
}

.user-message .message-content {
  text-align: right;
}

.user-message .message-header {
  justify-content: flex-end;
}

.user-message .message-actions {
  justify-content: flex-end;
}

/* 动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式设计 */
@media (max-width: 640px) {
  .chat-message {
    gap: var(--space-sm);
  }
  
  .message-avatar {
    width: 32px;
    height: 32px;
  }
  
  .avatar-icon {
    width: 16px;
    height: 16px;
  }
  
  .message-actions {
    opacity: 1;
  }
}
</style>